import { createHashRouter } from 'react-router-dom'
import React, { lazy, Suspense } from 'react'

interface RouteType {
    path: string,
    element: React.ReactNode,
    title?: string,
    children?: Array<RouteType>
}
const Login = lazy(() => import('../pages/Login'))
const Burn = lazy(() => import('../pages/Burn'))
const Daily = lazy(() => import('../pages/Daily'))
const Home = lazy(() => import('../pages/Home'))
const ModifyPwd = lazy(() => import('../pages/ModifyPwd'))
const Print = lazy(() => import('../pages/Print'))
const Recover = lazy(() => import('../pages/Recover'))
const State = lazy(() => import('../pages/State'))
const System = lazy(() => import('../pages/System'))
const Layout = lazy(() => import('../pages/Layout'))
const TemplateConfig = lazy(() => import('../pages/System/components/TemplateConfig'))
const PERMISSION = lazy(() => import('../permission'))
const router = createHashRouter([
    {
        path: '/',
        element: <Suspense>
            <Login />
        </Suspense>,
    },
    {
        path: '/login',
        element: <Suspense>
            <Login />
        </Suspense>
    },
    {
        path: '/layout',
        element: <Suspense>
            <PERMISSION>
                <Layout />
            </PERMISSION>
        </Suspense>,
        children: [
            {
                path: 'state',
                element: <Suspense>
                    <State />
                </Suspense>
            },
            {
                path: 'system',
                element: <Suspense>
                    <System />
                </Suspense>
            },
            {
                path: 'edit',
                element: <Suspense>
                    <ModifyPwd />
                </Suspense>
            },
            {
                path: 'home',
                element: <Suspense>
                    <Home />
                </Suspense>
            },
            {
                path: 'daily',
                element: <Suspense>
                    <Daily />
                </Suspense>
            },
            {
                path: 'recover',
                element: <Suspense>
                    <Recover />
                </Suspense>
            },
            {
                path: 'print',
                element: <Suspense>
                    <Print />
                </Suspense>
            },
            {
                path: 'burn',
                element: <Suspense>
                    <Burn />
                </Suspense>
            },
            {
                path: 'template',
                element: <Suspense>
                    <TemplateConfig />
                </Suspense>
            },
        ]
    }
])
export default router